<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易笔记应用</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>简易笔记应用</h1>
        </header>
        
        <!-- 消息提示区域 -->
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="messages">
                    {% for message in messages %}
                        <div class="message">{{ message }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
        
        <!-- 搜索和新建按钮区域 -->
        <div class="search-create-section">
            <div class="search-container">
                <form method="GET" action="/" class="search-form">
                    <input type="text" name="search" placeholder="搜索笔记..." value="{{ search_query }}" class="search-input">
                    <button type="submit" class="search-btn">搜索</button>
                </form>
            </div>
            <a href="{{ url_for('new_note') }}" class="new-note-btn">新建笔记</a>
        </div>
        
        <!-- 笔记列表区域 -->
        <div class="notes-section">
            {% if notes %}
                <div class="notes-list">
                    {% for note in notes %}
                        <div class="note-item">
                            <h3 class="note-title"><a href="{{ url_for('view_note', note_id=note[0]) }}">{{ note[1] }}</a></h3>
                            <div class="note-preview">
                                {{ note[2][:150] }}{% if note[2]|length > 150 %}...{% endif %}
                            </div>
                            <div class="note-meta">
                                <span class="note-date">创建于: {{ note[3] }}</span>
                                {% if note[3] != note[4] %}
                                    <span class="note-updated">更新于: {{ note[4] }}</span>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="no-notes">
                    {% if search_query %}
                        <p>没有找到包含 "{{ search_query }}" 的笔记</p>
                        <a href="{{ url_for('index') }}">查看所有笔记</a>
                    {% else %}
                        <p>暂无笔记，点击"新建笔记"开始创建吧！</p>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 添加消息提示的自动消失效果
            const messages = document.querySelectorAll('.message');
            messages.forEach(message => {
                setTimeout(() => {
                    message.classList.add('fade-out');
                }, 3000);
            });
        });
    </script>
</body>
</html>